<template>
  <div>
    <section class="content" id="content">
      <header>
        <div class="logo fl">
          <a href="#">
            <img src="../../assets/images/logo1.png" />
            <img src="../../assets/images/logo2.png" />
          </a>
        </div>
        <p class="txt fl">深圳节能在线<br />工业节能与绿色发展</p>
        <div class="header-links fr">
          <span>快捷登录</span>
          <div class="header-links-sub">
            <ul>
              <li>
                <a href="#">用能单位</a>
              </li>
              <li>
                <a href="#">服务机构</a>
              </li>
              <li>
                <a href="#">技术专家</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="search fr">
          <form>
            <input
              v-model.trim="searchData"
              type="search"
              placeholder="输入关键字..."
              class="text fl"
            />
            <button
              type="submit"
              value=""
              class="submit fr"
              @click.prevent="searchBottm($event)"
            ></button>
          </form>
          <div class="keywords">
            <strong>热点搜索：</strong>
            <a
              href="javascript:void(0);"
              v-for="(item, index) in hotBootData"
              :key="index"
              @click="jumpData(item)"
              >{{ item }}</a
            >
          </div>
        </div>
      </header>
      <nav>
        <a href="#" class="on">首页</a>
        <a href="#">工业节能</a>
        <a href="#">绿色发展</a>
        <a href="#">资源综合利用</a>
        <a href="#">绿色低碳产业</a>
        <a href="#">生态文明建设</a>
        <a href="#">公共服务</a>
        <a href="#">宣传培训</a>
        <a   href="javascript:void(0)" @click="JumpToPage(SiteData.gxj_website);return false;">工信局主页</a>
      </nav>
      <router-view></router-view>
    </section>

    <footer>
      <p>主办单位：深圳市工业和信息化局</p>
      <p>
        投诉/咨询电话：12345 88102553 咨询邮箱：xzc@gxj.sz.gov.cn
        地址：深圳福田福中三路市民中心三楼深圳市工业和信息化局
      </p>
      <p>
        网站标识码：4403000048 <a href="#">粤ICP备10053215号</a>
        <a href="#">粤公网安备 44030402003015号</a>
      </p>
      <p>
        <a href="#">隐私声明</a><span class="line">|</span
        ><a href="#">版权保护</a><span class="line">|</span
        ><a href="#">网站帮助</a><span class="line">|</span
        ><a href="#">联系我们</a><span class="line">|</span
        ><a href="#">网站地图</a>
      </p>
      <a href="#" class="icon"></a>
    </footer>
  </div>

  <!-- 路由匹配到的组件将渲染在这里 -->
</template>

<script>
import { getters, getHotsearch } from "../../api/public";
export default {
  name: "Layout",
  data() {
    return {
      hotBootData: [],
      searchData: "",
      SiteData: {},
    };
  },
  mounted() {
    var that = this;
    getters().then((res) => {
      this.SiteData = res.data;
      that.$store.state.sitesetting.SiteData = res.data;
    });
    this.HotsearchData();
  },
  methods: {
    jumpData(item) {
      if (!this.searchData) {
        this.searchData = item;
      }
      if (this.$route.path != "/search") {
        this.$router.push({
          path: "/search",
          query: {
            searchData: item,
          },
        });
      } else {
        this.content = item;
      }
    },
    JumpToPage(link) {
      this.$confirm("您将跳转到其它网站,是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          window.open(link);
        })
        .catch(() => {});
      return false;
    },
    HotsearchData() {
      getHotsearch({
        count: "3",
      }).then((res) => {
        this.hotBootData = res.data.hot;
      });
    },
    searchBottm(e) {
      if (!this.searchData) {
        this.$message({
          message: "请输入搜搜关键字!",
          type: "warning",
        });
      } else {
        if (this.$route.path != "/search") {
          this.$router.push({
            path: "/search",
            query: {
              searchData: this.searchData,
            },
          });
        } else {
          this.content = this.searchData;
        }
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
